/**
 * PDF中文字体支持
 * 使用html2canvas + jsPDF的方案，将HTML渲染为图片再导出PDF
 */
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

/**
 * 将HTML元素转换为PDF
 * @param element - 要转换的HTML元素
 * @param filename - 导出的PDF文件名
 */
export const exportElementToPDF = async (
  element: HTMLElement,
  filename: string
): Promise<void> => {
  try {
    // 使用html2canvas将HTML渲染为canvas
    const canvas = await html2canvas(element, {
      scale: 2, // 提高清晰度
      useCORS: true,
      logging: false,
      backgroundColor: '#ffffff',
    });

    // 获取canvas的尺寸
    const imgWidth = 210; // A4纸宽度（mm）
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    
    // 创建PDF
    const pdf = new jsPDF({
      orientation: imgHeight > imgWidth ? 'portrait' : 'landscape',
      unit: 'mm',
      format: 'a4',
    });

    // 将canvas转换为图片并添加到PDF
    const imgData = canvas.toDataURL('image/png');
    
    // 如果内容高度超过一页，需要分页
    let heightLeft = imgHeight;
    let position = 0;
    const pageHeight = pdf.internal.pageSize.getHeight();

    // 添加第一页
    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;

    // 添加后续页面
    while (heightLeft > 0) {
      position = heightLeft - imgHeight;
      pdf.addPage();
      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;
    }

    // 保存PDF
    pdf.save(filename);
  } catch (error) {
    console.error('PDF导出失败:', error);
    throw new Error('PDF导出失败：' + (error as Error).message);
  }
};

/**
 * 导出表格数据为带中文的PDF（使用图片方案）
 * @param data - 表格数据
 * @param filename - 文件名
 */
export const exportTableDataToPDF = async (
  data: Record<string, any>,
  filename: string
): Promise<void> => {
  // 创建一个临时的HTML表格元素
  const container = document.createElement('div');
  container.style.position = 'absolute';
  container.style.left = '-9999px';
  container.style.top = '0';
  container.style.width = '800px';
  container.style.padding = '20px';
  container.style.backgroundColor = '#ffffff';
  container.style.fontFamily = 'Microsoft YaHei, SimSun, sans-serif';
  
  // 构建HTML内容
  let html = `
    <div style="text-align: center; margin-bottom: 20px;">
      <h1 style="font-size: 20px; margin: 10px 0;">中华人民共和国海关进出口货物报关单</h1>
      <p style="font-size: 12px; color: #666;">数据提取结果</p>
    </div>
    <table style="width: 100%; border-collapse: collapse; font-size: 12px;">
  `;

  // 遍历数据生成表格行
  for (const [key, value] of Object.entries(data)) {
    if (key === '项目' && Array.isArray(value)) {
      // 项目字段特殊处理
      html += `
        <tr>
          <td colspan="2" style="border: 1px solid #000; padding: 8px; background: #f5f5f5; font-weight: bold;">
            商品明细
          </td>
        </tr>
      `;
      value.forEach((item: any, index: number) => {
        html += `
          <tr>
            <td colspan="2" style="border: 1px solid #000; padding: 4px; background: #fafafa;">
              项目 ${index + 1}
            </td>
          </tr>
        `;
        for (const [itemKey, itemValue] of Object.entries(item)) {
          html += `
            <tr>
              <td style="border: 1px solid #000; padding: 4px; width: 30%; background: #f9f9f9;">${itemKey}</td>
              <td style="border: 1px solid #000; padding: 4px; width: 70%;">${itemValue || ''}</td>
            </tr>
          `;
        }
      });
    } else {
      // 普通字段
      const displayValue = typeof value === 'object' ? JSON.stringify(value) : (value || '');
      html += `
        <tr>
          <td style="border: 1px solid #000; padding: 4px; width: 30%; background: #f9f9f9; font-weight: bold;">${key}</td>
          <td style="border: 1px solid #000; padding: 4px; width: 70%;">${displayValue}</td>
        </tr>
      `;
    }
  }

  html += '</table>';
  container.innerHTML = html;
  
  // 添加到DOM
  document.body.appendChild(container);

  try {
    // 导出为PDF
    await exportElementToPDF(container, filename);
  } finally {
    // 清理临时元素
    document.body.removeChild(container);
  }
};
